<svelte:window on:popstate="popstate(event)" />

<div class="create-nav">
    {#each steps as step,i}
    <EditorNavStep on:select="select(step, i)" index="{i+1}" bind:step bind:steps bind:active />
    {/each}
</div>

{#if $user.id != $authorId && $user.isAdmin}
<div class="alert alert-warning" style="text-align: center; margin-top: 10px">
    This chart belongs to
    <a target="_blank" href="/admin/chart/by/{$authorId}">User {$authorId}</a>. Great power comes
    with great responsibility, so be careful with what you're doing!
</div>
{/if}

<style type="text/css">
    .create-nav {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    import EditorNavStep from './EditorNavStep.html';
    import { findWhere } from 'underscore';
    import { trackPageView } from '@datawrapper/shared/analytics';

    export default {
        components: { EditorNavStep },
        data() {
            return {
                steps: []
            };
        },
        methods: {
            select(step, index) {
                this.set({ active: step.id });
                const { lastEditStep } = this.store.get();
                this.store.set({ lastEditStep: Math.max(lastEditStep, index + 1) });
                trackPageView();
            },
            popstate(event) {
                if (event.state && event.state.id && event.state.step) {
                    const { id, step } = event.state;
                    if (id === this.store.get().id) {
                        // same chart id
                        this.set({ active: step.id });
                        trackPageView();
                    } else {
                        // need to reload
                        window.location.href = `/edit/${id}/${step.id}`;
                    }
                }
            }
        },
        oncreate() {
            const { active, steps } = this.get();
            const { lastEditStep, id } = this.store.get();
            const step = findWhere(steps, { id: active });
            this.store.set({ lastEditStep: Math.max(lastEditStep, steps.indexOf(step) + 1) });
            // make sure the initial state is stored
            window.history.replaceState({ step, id }, step.title);
        }
    };
</script>
